<template>
  <!-- 图片预览 -->
  <a-modal
    :width="900"
    v-bind="$attrs"
    v-on="$listeners"
    :visible="dialogVisible"
    :footer="null"
    @cancel="handleCancel"
  >
    <div :style="'height: '+GET_REDRESS_PERCENTAGE * 0.7+'vh; position: relative; z-index: 1; overflow: hidden'">
      <template v-if="dialogVisible && previewImage.length > 0">
        <!-- img为字符时 -->
        <Points v-if="imgType" :isCompress="false" :img="previewImage" :isDownload="isDownload" v-bind="$attrs" v-on="$listeners" :pointer.sync="points" :otherAction="''" />
        <!-- img为数组时 -->
        <template v-else>
          <template v-if="previewList.length > 1">
            <!-- 左箭头 -->
            <div
              v-show="loop || (!loop && current > 0)"
              class="custom-slick-arrow"
              style="left: 10px"
              @click="handleAction(0)"
            >
              <a-icon type="left-circle" />
            </div>
            <!-- 右箭头 -->
            <div
              v-show="loop || (!loop && current < previewImage.length - 1)"
              class="custom-slick-arrow"
              style="right: 10px"
              @click="handleAction(1)"
            >
              <a-icon type="right-circle" />
            </div>
          </template>
          <transition-group :name="['fade-left', 'fade-right'][direction]">
            <template v-for="(item, index) in previewList">
              <Points v-if="current === index" :isCompress="false" :img="item" :key="index" :isDownload="isDownload" v-bind="$attrs" v-on="$listeners" :pointer.sync="points" :otherAction="''" />
            </template>
          </transition-group>
        </template>
      </template>
    </div>
  </a-modal>
</template>

<script>
import Points from '@/components/canvas/Points' // canvas
import Vue from 'vue'
import {mapGetters } from 'vuex'
export default {
  name: 'PreView',
  components: {
    Points,
  },
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default: () => false,
    },
    // 是否循环
    loop: {
      type: Boolean,
      default: () => true,
    },
    // 是否可下载
    isDownload: {
      type: Boolean,
      default: () => true,
    },
    // 预览图
    previewImage: [String, Object, Array],
    // 选中点位
    pointer: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      token: '', // token
      current: 0, // 当前图片索引值
      direction: 0, // 切换方向
    }
  },
  created() {
    this.token = Vue.getAcloudProvider().getAccessToken()
  },
  computed: {
    ...mapGetters(['GET_REDRESS_PERCENTAGE']),
    // 预览图列表
    previewList() {
      return this.previewImage.map(
        (item) => '/api/ycloud-file-center/oper/download?access_token=' + this.token + '&fileId=' + item.fileId
      )
    },
    // 预览图数据类型
    imgType() {
      return typeof this.previewImage === 'string'
    },
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      },
    },
    // 点位坐标列表
    points: {
      get: function () {
        return this.pointer
      },
      set: function (e) {
        this.$emit('update:pointer', e)
      }
    }
  },
  methods: {
    /**
     * 切换图片,type:0 递减；1 递增
     */
    handleAction(type) {
      // 递减时
      if (type === 0) {
        this.direction = 0
        // 当前为第一张时，则切换到最后一张
        if (this.current === 0) {
          this.current = this.previewList.length - 1
        } else {
          this.current--
        }
        // 递增时
      } else {
        this.direction = 1
        // 当前为最后一张时，则切换到第一张
        if (this.current === this.previewList.length - 1) {
          this.current = 0
        } else {
          this.current++
        }
      }
    },
    /**
     * 关闭弹窗
     */
    handleCancel() {
      this.current = 0
      this.dialogVisible = false
    },
  },
}
</script>

<style lang="less" scoped>
.custom-slick-arrow {
  width: 25px;
  position: absolute;
  height: 25px;
  font-size: 30px;
  top: calc(50% - 12px);
  color: #333;
  z-index: 3;
  cursor: pointer;
}
</style>